<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <title>Persons</title>

    <link rel="stylesheet" type="text/css" href="${resource(dir: 'css/person', file: 'index.css')}"/>
    <link rel="stylesheet" type="text/css" href="${resource(dir: 'css/person', file: 'table.css')}"/>

    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="${resource(dir: 'js/person', file: 'index.js')}"></script>
</head>

<body>

%{--Div for showing more detailed data about person--}%
<div id="details" onclick="hideDetails()"></div>

%{--Div for showing table with data and form for adding new person--}%
<div id="main">

    %{--Div for keeping table with all person into database--}%
    <div id="table">
        <g:include action="table"/>
    </div>

    %{--Button for showing form where user can create new person--}%
    <input type="button" value="Show add form" onclick="toggleAddForm()">

    %{--Div for keeping adding form--}%
    <div id="add_form">
        <g:render template="add_form"/>
    </div>

</div>

</body>
</html>